<template>
  <el-container>
    <el-main>
      <el-form label-position="top" label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm" status-icon>
        <el-form-item label="原密码" prop="old_password">
          <el-input type="password" v-model="ruleForm.old_password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new_password">
          <el-input type="password" v-model="ruleForm.new_password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="new_password_confirmation">
          <el-input type="password" v-model="ruleForm.new_password_confirmation"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { changePwd } from '@/network/user'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      ruleForm: {
        old_password: '',
        new_password: '',
        new_password_confirmation: ''
      },
      rules: {
        old_password: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        new_password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        new_password_confirmation: [{ required: true, message: '请再输入一次新密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if(valid) {
          const { status, message } = await changePwd(this.ruleForm)
          if(status === 0) {
            Message.success('成功')
          }else {
            Message.error(message)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-container {
    background-color: #f1f2f9;
    padding: 20px 6px 20px 20px;
    .el-main {
      height: 496px;
      padding-top: 52px;
      background-color: #fff;
      .el-form {
        width: 32%;
        margin: 0 auto;
      }
    }
  }
</style>